<template>
  <div class="main">
    <div class="outerDiv">
      <headerBack></headerBack>
      <scrollerEdit lock-x>
        <div class="main">
          <div class="loginWrap">
            <div class="login">
              <!-- <xInput :errMsg="errMsgs1" groupTitle="手机号码" plvalue="请输入登录手机号" v-model="vals1" :showXx="showxx" v-on:clears="clear"
              type="txt"></xInput>-->

              <div class="telnums">
                <b>手机号码</b>
                <span>{{ vals1 }}</span>
              </div>
              <xInput plvalue="请输入验证码" v-model="vals3" :yzmtrue="showyzm" v-on:clears="clear" type="yzm" v-on:sends="sendYzm" groupTitle="验证码" :yzmMsg="yzmMsg"></xInput>
              <xInput :errMsg="errMsgs2" groupTitle="密码" plvalue="请输入新密码（不少于6位）" v-model="vals2" :showXx="showxx" type="pwd" v-on:clears="clear"></xInput>
            </div>
            <sumbitBtn message="确定" :isSumbit="showColor" @btnClick="suresLogin"></sumbitBtn>
          </div>
        </div>
      </scrollerEdit>
    </div>
  </div>
</template>
<script>
import { Group } from 'vux'
import scrollerEdit from '~/components/scrollerEdit'
import JSEncrypt from 'jsencrypt/bin/jsencrypt'
import ls from 'store2'
import xInput from '~/components/xInput'
import sumbitBtn from './components/sumbitBtn'
import headerBack from '~/components/headerBack'
import { sendMessageCode, forgetPassword } from '~/api/identity'
export default {
  components: {
    sumbitBtn,
    xInput,
    Group,
    scrollerEdit,
    headerBack,
  },
  data() {
    return {
      showyzm: false,
      yzmMsg: '发送验证码',
      vals1: '',
      vals2: '',
      vals3: '',
      errMsgs1: '',
      errMsgs2: '',
      errMsgs3: '',
      showxx: false,
      showColor: false,
      nNum: 60,
    }
  },
  mounted: function() {
    this.vals1 = ls.get('yxkData').account
    this.$visit('EditPassword')
  },
  watch: {
    vals1(e) {
      const reg = /^1[3456789]\d{9}$/
      if (reg.test(e)) {
        this.showyzm = true
        if (this.vals3.length > 3 && this.vals2.length > 5 && this.vals2.length < 17) {
          this.showColor = true
        } else {
          this.showColor = false
        }
      } else {
        clearInterval(this.timer)
        this.yzmMsg = '发送验证码'
        this.nNum = 60
        this.showyzm = false
        this.showColor = false
      }
    },

    vals3(e) {
      const reg = /^1[3456789]\d{9}$/
      if (e.length > 3 && this.vals2.length > 5 && this.vals2.length < 17 && reg.test(this.vals1)) {
        this.showColor = true
      } else {
        this.showColor = false
      }
    },
    vals2(e) {
      const reg = /^1[3456789]\d{9}$/
      if (this.vals3.length > 3 && e.length > 5 && e.length < 17 && reg.test(this.vals1)) {
        this.showColor = true
      } else {
        this.showColor = false
      }
    },
  },
  methods: {
    clear() {
      this.vals1 = ''
    },
    senyam() {
      this.showyzm = false

      this.timer = setInterval(() => {
        this.nNum -= 1
        this.yzmMsg = this.nNum + '秒'
        if (this.nNum <= 0) {
          clearInterval(this.timer)
          this.yzmMsg = '发送验证码'
          this.showyzm = true
          this.nNum = 60
        }
      }, 1000)
    },
    sendYzm() {
      // sendYzm() {
      if (this.nNum < 60) {
        this.$vux.toast.text('请稍后发送')
        return false
      }
      if (this.showyzm == false) {
        this.$vux.toast.text('请输入正确11位手机号码')
        return false
      }

      this.senyam()
      sendMessageCode({
        codeType: 3,
        mobile: this.vals1,
      })
        .then((res) => {
          this.$vux.toast.text(res.message)
          if (res.message !== '已发送验证码') {
            clearInterval(this.timer)
            this.yzmMsg = '发送验证码'
            this.nNum = 60
          }
        })
        .catch((error) => {
          this.$vux.toast.text(error)
        })
    },

    suresLogin() {
      let encryptor = new JSEncrypt() // 新建JSEncrypt对象
      let publicKey = `MIGfMA0GCSqGSIb3DQEBAQUAA4GNADCBiQKBgQCCU+sOs2dwS5k10e44LhAwEVDicF2SM9O6/cDdXuDyemjx/RMT/yDJHQ4+jqJOB11nIdeo2lvrD/9oPMePauTjCaXd7AxO75Gzx24skFOb6Rw5Tvjffgsm0ka+/UbK6OWdruPXJDSCrnRskQVhMNRrV6qGLaOCWCQzNwOcz7aCMQIDAQAB`
      encryptor.setPublicKey(publicKey) // 设置公钥
      this.regTime = new Date().getTime()
      this.rsaPassWord = encryptor.encrypt(this.regTime + this.vals2)

      let _this = this
      if (this.showColor === true) {
        forgetPassword({
          account: this.vals1,
          credentials: this.vals3 * 1,
          forgetTime: this.regTime,
          password: this.rsaPassWord,
        })
          .then((res) => {
            if (res.code == '0') {
              this.$vux.toast.text(res.message)
              setTimeout(function() {
                _this.commonJs.gosto('pwdLogin', _this.$route.query.type)
                _this.$hideLoading()
              }, 500)
            } else {
              this.$vux.toast.text(res.data.message)
            }
          })
          .catch(() => {
            // this.$vux.toast.text('网络故障');
          })
      } else {
      }
    },
  },
}
</script>

<style lang="less" scoped>
.outerDiv {
  width: 100%;
  height: 100vh;
  background: #fff;

  .loginWrap {
    padding: 0 0.3rem;
    background: #fff;

    .forgetH2 {
      font-family: 'PingFang-SC-Bold';

      color: rgba(29, 30, 34, 1);
      line-height: 0.6rem;
      font-weight: bold;
      font-size: 0.48rem;
    }

    .login {
      width: 100%;
      height: auto;
      margin: 0.5rem 0 2rem;
      .telnums {
        height: 1.5rem;
        border-bottom: 0.01rem solid #eee;
        margin-bottom: 0.2rem;
        b {
          display: block;
          padding-left: 15px;
          box-sizing: border-box;
          color: #999;
          font-size: 0.28rem;
          font-family: PingFangSC;
          font-weight: 400;
        }
        span {
          display: block;
          height: 0.8rem;
          font-size: 0.3rem;
          color: #222;
          line-height: 0.8rem;
          padding-left: 0.5rem;
          box-sizing: border-box;
        }
      }
    }
  }
}
</style>
